<script setup lang="ts">
	import { ref, computed, nextTick } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
  const assignedChange = (val) => {
    if(val.length > 1) {
      newFormInline.value.hasMultiUser = 1
    } else {
      newFormInline.value.hasMultiUser = 0
    }

  }
  const cascaderPropsParent = computed(() => ({
    showPrefix: false,
    checkStrictly: true,
    checkOnClickNode: true,
    checkOnClickLeaf: true,
    label: 'name',
    value: 'taskTypeId',
    children: 'childrens'
  }))
  const cascaderProps = computed(() => ({
    showPrefix: false,
    checkStrictly: true,
    checkOnClickNode: true,
    checkOnClickLeaf: true,
    label: 'name',
    // value: 'taskType',
    children: 'child'
  }))
  const handleVisibleChange = async () => {
    await nextTick();
    document.querySelectorAll('.el-cascader-node__label').forEach((el: any) => {
      el.onclick = () => el.previousElementSibling?.click();
    });
  };
  const handleChange = (e, p) =>{
    console.log(e, p)
  }
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
      	<el-form-item label="父任务阶段" prop="taskType">
      		<!-- <el-select
      		  v-model="newFormInline.taskType"
      		  placeholder="请选择"
      		  clearable
      		>
      		  <el-option
      		    v-for="item in newFormInline.taskTypeSelect"
      		    :key="item.value"
      		    :label="item.name"
      		    :value="item.value"
      		  />
      		</el-select> -->
          <el-cascader
            v-model="newFormInline.parentId"
            :options="newFormInline.taskTypeSelect"
            :props="cascaderPropsParent"
            :show-all-levels="false"
            clearable
            :disabled="newFormInline.title === '编辑任务'"
          />
      	</el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
      	<el-form-item label="任务阶段" prop="taskType">
      		<!-- <el-select
      		  v-model="newFormInline.taskType"
      		  placeholder="请选择"
      		  clearable
      		>
      		  <el-option
      		    v-for="item in newFormInline.taskTypeSelect"
      		    :key="item.value"
      		    :label="item.name"
      		    :value="item.value"
      		  />
      		</el-select> -->
          <el-cascader
            v-model="newFormInline.taskType"
            :options="newFormInline.taskTypeSelectParent"
            :props="cascaderProps"
            :show-all-levels="false"
            @visible-change="handleVisibleChange"
            @change="handleChange"
            clearable
            :disabled="newFormInline.title === '编辑任务'"
          />
      	</el-form-item>
      </re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="指派用户" prop="assignedExtraTo">
				  <el-select
				    v-model="newFormInline.assignedExtraTo"
				    placeholder="请选择"
				    clearable
				    multiple
            @change="assignedChange"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="1"
				  >
				    <el-option
				      v-for="item in newFormInline.userSelect"
				      :key="item.userId"
				      :label="item.name"
				      :value="item.userId"
				    />
				  </el-select>
				</el-form-item>
			</re-col>

			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="预估时长(天)" prop="duration">
					<el-input-number
						v-model="newFormInline.duration"
						class="!w-full"
						:min="0"
						:max="16"
						controls-position="right"
            :precision="0"
					/>
				</el-form-item>
			</re-col>
      <re-col :value="12" :xs="24" :sm="24">
      	<el-form-item label="优先级" prop="priority">
      		<el-input-number
      			v-model="newFormInline.priority"
      			class="!w-full"
      			:min="1"
      			:max="4"
      			controls-position="right"
      		  :precision="0"
      		/>
      	</el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
      	<el-form-item label="是否多人" prop="hasMultiUser">
      		<el-radio-group v-model="newFormInline.hasMultiUser">
            <el-radio :label="0">单人</el-radio>
            <el-radio :label="1">多人</el-radio>
          </el-radio-group>
      	</el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
      	<el-form-item label="关键词" prop="keyword">
      		<el-input v-model="newFormInline.keyword" clearable placeholder="请输入关键词" />
      	</el-form-item>
      </re-col>
			<re-col :value="24" :xs="24" :sm="24">
				<el-form-item label="描述" prop="description">
					<el-input v-model="newFormInline.description" type="textarea" :rows="2" clearable placeholder="请输入描述" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
  :deep(.el-cascader-node__label) {
    pointer-events: auto;
  }

</style>
